<link rel="import" href="polymer-animation.html">
<polymer-element name="polymer-flip" extends="polymer-animation">
  <script>
    Polymer('polymer-flip', {
      publish: {
        targetSelector: '',
        duration: 0.5,
        axis: 'x',
			},
			ready: function() {
				this.generate();
			},
      axisChanged: function() {
        this.generate();
      },
      generate: function() {
        var isY = this.axis === 'y' || this.axis === 'Y';
        var rotate = isY ? 'rotateY' : 'rotateX';
        var transZ = isY ? '150px' : '50px';
        this.properties = {
          transform: [{
            easing: 'ease-out',
            offset: 0,
            value: 'perspective(400px) translateZ(0px) ' + rotate + '(0deg) scale(1)'
          }, {
            easing: 'ease-out',
            offset: 0.4,
            value: 'perspective(400px) translateZ(' + transZ + ') ' + rotate + '(170deg) scale(1)'
          }, {
            easing: 'ease-in',
            offset: 0.5,
            value: 'perspective(400px) translateZ(' + transZ + ') ' + rotate + '(190deg) scale(1)'
          }, {
            easing: 'ease-in',
            offset: 0.8,
            value: 'perspective(400px) translateZ(0px) ' + rotate + '(360deg) scale(.95)'
          }, {
            easing: 'ease-in',
            offset: 1,
            value: 'perspective(400px) translateZ(0px) ' + rotate + '(360deg) scale(1)'
          }]
        }
      }
    });
  </script>
</polymer-element>
